<script setup lang="ts">
import { reactive, ref, watchEffect } from "vue";
import TextArea from "@/components/Form/textFields.vue";
// import Select from "@/components/Form/select.vue";
import mapAddress from "@/components/Form/mapAddress.vue";
import dateCalendar from "@/components/Form/dateCalendar.vue";
const isRequire = ref(true);

const arrayData = ref([
  { text: "杭州", value: "Hangzhou" },
  { text: "宁波", value: "Ningbo" },
  { text: "温州", value: "Wenzhou" },
  { text: "绍兴", value: "Shaoxing" },
  { text: "湖州", value: "Huzhou" },
]);
const keyDemos = reactive({
  name: "Wenzhou",
}); //测试将获取到的下拉框值赋值给它
const normalValue = ref(" ");

// setTimeout(() => {
//   normalValue.value = "Huzhou";
// }, 3000);

//获取下拉框选中的值
function getSelectValues(val: string, key: string): void {
  keyDemos[key] = val;
  alert(keyDemos.name);
}
let addressvalue = ref("111");
const formVal = reactive({
  remark: [{ required: true, message: "请输入备注！" }],
});
const formVal2 = reactive({
  remark: [{ required: true, message: "请输入地址！" }],
});
// 校验
function onSubmit(values: object) {
  console.log(values, normalValue.value);
}
let date = ref([new Date(2013, 5, 4), new Date(2013, 7, 8)]);
watchEffect(() => {
  console.log(addressvalue.value);
});
let address = ref("");
function addressclick() {
  addressvalue.value = "222";
}
</script>
<template>
  <div class="padding_15">
    <div class="public_form_box">
      <van-form @submit="onSubmit">
        <TextArea
          :isRequire="formVal.remark[0].required"
          label="备注"
          :message="formVal.remark[0].message"
          name="remark"
          :placeholder="'请输入备注'"
          v-model="address"
        ></TextArea>
        <!-- <Select
          v-model="normalValue"
          label="招牌材质2"
          class="public_bottom_line"
          :isRequire="isRequire"
          :columns="arrayData"
        /> -->
        <mapAddress
          v-model="addressvalue"
          :isRequire="true"
          label="地址"
          name="address"
          :placeholder="'请输入地址'"
          :message="formVal2.remark[0].message"
          ><van-icon name="location-o" @click="addressclick" />定位
        </mapAddress>
        <dateCalendar
          label="时间范围"
          class="public_bottom_line"
          v-model="date"
          required
          :rules="[{ required: true, message: '1' }]"
          name="date"
          :minDate="new Date(1999, 0, 1)"
        ></dateCalendar>

        <div class="login-box">
          <button class="btn-blue" native-type="submit">提交</button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-box {
  padding: 20px;
  .btn-blue {
    width: 100%;
    height: 46px;
    background-color: #1677ff;
    color: #fff;
    border: 1px solid #1677ff;
    border-radius: 4px;
  }
}
</style>
